<template>
  <div class="storage-msg">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap" v-if="showStatus == 0">
        <el-form ref="formRef" :model="params">
          <el-row>
            <el-col :span="5">
              <el-form-item label="地区：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>

            <!-- <el-col :span="6">
              <el-form-item label="内容:">
                <el-input
                  clearable
                  v-model="params.content"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="5">
              <el-form-item label="开始日期：" label-width="130px">
                <el-date-picker
                  v-model="params.startdate"
                  type="date"
                  clearable
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="结束日期：" label-width="165px">
                <el-date-picker
                  clearable
                  v-model="params.enddate"
                  type="date"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5"
              ><el-form-item label="状态：" label-width="160px">
                <el-select
                  v-model="params.status"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="4">
              <el-form-item label-width="80px">
                <el-button type="primary" @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
                <!-- <el-button
                  class="add"
                  style="margin-left: 24px"
                  :icon="ArrowLeft"
                  @click="handlerAdd"
                  ><el-icon
                    style="color: #fff; margin-right: 5px; font-size: 20px"
                    ><DocumentAdd /></el-icon
                  >新增</el-button
                > -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <button class="back" @click="handerBtn" v-if="showStatus != 0">
      <img src="@/assets/images/wasteenterprise/back-icon.png" alt="" />
      返回
    </button>

    <!-- 表格 -->
    <div class="data-wrap" v-if="showStatus == 0">
      <el-table
        :data="tableData"
        border
        :show-overflow-tooltip="true"
        class="table-height"
        style="width: 100%"
      >
        <!-- <el-table-column align="center" type="selection" width="60" /> -->
        <el-table-column prop="customername" align="center" label="企业名称" />

        <el-table-column prop="content" align="center" label="反馈内容" />

        <!-- <el-table-column
          prop="committime"
          align="center"
          label="上传图片"
          width="135"
        >
          <template #default="{ row }">
            <button
              style="background-color: transparent"
              @click="searchImage(row.sitephoto)"
            >
              点击查看
            </button>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="hbmobile"
          align="center"
          label="联系电话"
          width="160"
        />
        <el-table-column prop="committime" align="center" label="反馈时间">
        </el-table-column>
        <!-- 
        <el-table-column prop="dowithremark" align="center" label="处理内容">
        </el-table-column> -->

        <el-table-column prop="status" align="center" label="状态" width="130">
          <template #default="{ row }">
            <span
              :style="
                row.status == 0
                  ? 'color:#FA0808'
                  : row.status == 1
                  ? 'color:#FA7408'
                  : row.status == 2
                  ? 'color:#0874FA'
                  : ''
              "
            >
              {{
                row.status == 0
                  ? "待处理"
                  : row.status == 1
                  ? "处理中"
                  : row.status == 2
                  ? "已处理"
                  : "--"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="committime" align="center" label="处理时间">
        </el-table-column>
        <el-table-column prop="address" align="center" label="操作" width="280">
          <!-- b #CEE3FE    c  #0874FA   审核-->
          <template #default="{ row }">
            <div class="table-btn-wrap">
              <el-button
                class="detail"
                :style="
                  row.status == 2 ? 'background-color:#fa0808;color:#fff' : ''
                "
                @click="editMsg(row.id, row.status)"
                >{{ row.status == 2 ? "撤回" : "去处理" }}</el-button
              >
              <button class="facility" @click="handerDetail(row)">详情</button>
              <!-- <button class="declaration" @click="openDeclaration">
                开通申报
              </button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 17px">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>
    <!-- 详情弹框 -->
    <Dialog
      diaTop="10"
      headerName="详情"
      v-model:showDialog="detailFlag"
      saveLetter="保存"
      diaWidth="46"
      footerTop="22"
      footerBtm="30"
      @close="detailFlag = false"
      :footerShow="false"
    >
      <template #content>
        <div class="content-wrap">
          <div class="title">
            企业名称：<span>{{ itemRow.customername }}</span>
          </div>
          <div class="inform">反馈内容：{{ itemRow.content }}</div>
          <!-- sitephoto -->
          <div class="warning">
            上传图片：<button @click="searchImage(itemRow.sitephoto)">
              点击查看
            </button>
          </div>
          <div class="time">联系电话：{{ itemRow.hbmobile }}</div>
          <div class="content-name">反馈时间：{{ itemRow.committime }}</div>
          <div class="content-name" v-if="itemRow.dowithtime">
            处理时间：{{ itemRow?.dowithtime || "无" }}
          </div>
          <div class="content">
            处理内容：{{ itemRow?.dowithremark || "无" }}
          </div>
          <div class="status">
            状态：
            <span
              :style="
                itemRow.status == 0
                  ? 'color:#FA0808'
                  : itemRow.status == 1
                  ? 'color:#FA7408'
                  : itemRow.status == 2
                  ? 'color:#0874FA'
                  : ''
              "
            >
              {{
                itemRow.status == 0
                  ? "未处理"
                  : itemRow.status == 1
                  ? "处理中"
                  : itemRow.status == 2
                  ? "已处理"
                  : "--"
              }}
            </span>
          </div>
        </div>
      </template>
    </Dialog>
    <OperateDialog
      v-model:showDialog="deleteFlag"
      msg="确定要撤回吗？"
      @save="diaDelSave"
    />
    <!-- 添加弹框 -->
    <AddData
      v-model:showDialog="showAddFlag"
      :addOrEditFlag="addOrEditFlag"
      @save="addSave"
      :ids="ids"
      :statusVal="statusVal"
    />
    <!-- @save="showRecordSave" -->
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import Dialog from "@/components/Dialog.vue";
import ElMessage from "@/components/ElMessage.js";
import AddData from "./addData";
import changeArea from "@/utils/changeArea.js";
import OperateDialog from "@/components/operateDialog";
import http from "@http";
let params = reactive({ page: 1, pagesize: 10 });
let handleSearch = () => {};
let addOrEditFlag = ref(true);
let roleList = ref([]);
let srcList = ref([]);
let showImg = ref(false);
let departmentList = ref([]);
let detailFlag = ref(false);
let userStatusList = ref([]);
let adminAreaList = ref([]);
let statusVal = ref("");
let statusList = ref([]);
let total = ref(11);
let ids = ref("");
let itemRow = ref({});
let facilityListFlag = ref(true);
let showAddFlag = ref(false);
let pagiFacilityParams = ref({});
let deleteFlag = ref(false);
let facilityList = ref([]); //企业设施列表
let searchWrapStyle = ref("140px");
let sendMsg = reactive({});
let showChangeFacilityDetail = ref(false); //更换弹框
let showDialog = ref(false);
let pagiFacilityTotal = ref(1);
let handerRecord = () => {
  //企业设施 记录
  showRecordFlag.value = true;
};
let dateRange = ref([]);
let editChangeDetailMsg = () => {
  //企业设施 更换
  showChangeFacilityDetail.value = true;
};
// let showRecordSave = () => { //企业设施 记录
//   showChangeFacilityDetail.value = true;
// };
let facilityParams = reactive({}); // 企业设施查询参数
let form = reactive({});
/* 企业设施详情 */
let facilityDetail = () => {
  facilityListFlag.value = false;
};
let searchImage = (url) => {
  console.log(url, "url");
  if (!url) {
    ElMessage({ msg: "暂无图片", type: "warning" });
    return;
  }
  srcList.value = url.split(",");

  showImg.value = true;
};
//新增
let handlerAdd = () => {
  showAddFlag.value = true;
  addOrEditFlag.value = true;
};
//编辑
let editMsg = (id, status) => {
  ids.value = id;
  if (status != 2) {
    showAddFlag.value = true;
    statusVal.value = status;
    return;
  }
  deleteFlag.value = true;
};
let serachDateChange = (e) => {
  if (e == null) {
    params.startdate = "";
    params.enddate = "";
    return;
  }
  params.startdate = e[0];
  params.enddate = e[0];
};
/* 企业设施编辑 */
let changeDetail = () => {
  showChangeFacilityDetail.value = true;
};

let showStatus = ref(0);
let options = ref([
  { label: "佛挡杀", value: 2 },
  { label: "佛挡杀", value: 2 },
]);
let handleAudit = () => {
  showDialog.value = true;
};
//企业详情弹框确认按钮
let editEnterpriseDetailSave = () => {
  console.log("执行了");
};
let addSave = () => {
  getList();
  showAddFlag.value = false;
};
//企业设施更换  弹框确认按钮
let editChangeDetailSave = () => {};
watch(
  () => showStatus.value,
  () => {
    if (showStatus.value == 0) {
      searchWrapStyle.value = "192px";
    } else {
      searchWrapStyle.value = "70px";
    }
  },
  { deep: true }
);

let searchEnterpriseDetail = () => {
  showStatus.value = 2;
};
let searchFacilityDetail = () => {
  showStatus.value = 2;
};
let handerBtn = () => {
  if (!facilityListFlag.value) {
    facilityListFlag.value = true;
    return;
  }
  showStatus.value = 0;
};
let handerDetail = (row) => {
  detailFlag.value = true;
  itemRow.value = row;
};
let openDeclaration = () => {};
let diaBack = () => {
  console.log("-=-=");

  showDialog.value = false;
};
//查看二维码
let searchQrcode = () => {};
//删除确定弹框
let diaDelSave = () => {
  http({
    url: "/admPCFeedback/dowithFeedBack",
    data: { id: ids.value, status: "0" },
  }).then((res) => {
    if (res.code == 0) {
      getList();
      deleteFlag.value = false;
    }
  });
};
let getList = () => {
  http({ url: "/admPCFeedback/datalist", data: params }).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list;
      total.value = res.data.total;
      ElMessage({ msg: "查询成功" });
    }
  });
};
http({ url: "/region/datalisttree" }).then((res) => {
  console.log(res, "res");
  if (res.code == 0) {
    adminAreaList.value = changeArea(res.data);
  }
});
getList();
let tableData = ref([]);
let handleDelete = () => {
  deleteFlag.value = true;
};
http({ url: "/listitem/getmodule", data: { module: "B09" } }).then((res) => {
  if (res.code == 0) {
    roleList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({ url: "/listitem/getmodule", data: { module: "B10" } }).then((res) => {
  if (res.code == 0) {
    userStatusList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({ url: "/listitem/getmodule", data: { module: "B11" } }).then((res) => {
  if (res.code == 0) {
    statusList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({ url: "/listitem/getdepartment" }).then((res) => {
  if (res.code == 0) {
    departmentList.value = res.data.map((item) => {
      return {
        label: item.departmentname,
        value: item.id,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
.storage-msg {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .enterprise-facility {
    padding-left: 0;
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;

    .table-wrap {
      margin-top: 0 !important;
      padding-left: 8px;
      padding-top: 0 !important;
      padding-right: 8px;
      .table-height {
        height: 53vh !important;
        overflow-y: scroll;
      }
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        padding-left: 19px;

        padding-right: 17px;
        button {
          width: 89px;
          height: 37px;
          border-radius: 4px;
        }
        .change-btn {
          color: #0874fa;
          background-color: #cee3fe;
        }
        .record-btn {
          color: #fa8508;
          background-color: #fee7ce;
        }
        .stop {
          background-color: #fecece;
        }
      }
    }

    .enterprise-facility-title {
      :deep(.el-form-item__label) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 22px;
        line-height: 40px;
        color: #333333;
      }
      :deep(.el-form) {
        margin-top: 20px;
        padding-left: 30px;
      }
      :deep(.el-input) {
        height: 40px;
        background: #ffffff;
        border-radius: 4px;
        /* border: 1px solid #cccccc; */
      }

      :deep(.el-button) {
        width: 89px;
        height: 37px;

        border-radius: 4px;
        box-shadow: none;
      }
      :deep(.el-icon) {
        font-size: 15px !important;
      }
      :deep(.el-button--primary) {
        background-color: #0874fa !important;
        width: 89px;
      }
      :deep(.el-input__inner) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
      }

      :deep(.el-input__inner::placeholder) {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #999999;
      }
      :deep(.el-button--danger) {
        width: 89px;
        background-color: #fa0808 !important;
      }
    }
    .title-name {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #333333;

      .line {
        width: 5px;
        height: 36px;
        background: #0874fa;
        margin-right: 26px;
      }
    }
  }
  .enterprise-detail {
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;
    display: flex;
    .edit {
      flex: 1;
      .close-btn {
        margin-left: 20px;
        width: 108px;
        height: 37px;
        background: #fa0808;
        border-radius: 4px;

        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
      .btn-edit {
        padding-left: 5px;
        width: 108px;
        height: 37px;
        background: #0874fa;
        border-radius: 4px;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
    }
    .main-wrap {
      flex: 1;
      .detail-wrap {
        margin-top: 30px;
        border: 1px solid #cccccc;
        margin-left: 30px;
        padding-left: 28px;
        padding-bottom: 50px;
        .line {
          margin-top: 33px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 20px;
          color: #333333;

          .left {
            flex: 1;
            img {
              width: 209px;
              height: 225px;
              border: 1px solid #cccccc;
            }
          }
          .right {
            flex: 1;
            text-align: left;
            img {
              width: 155px;
              height: 156px;
              border: 1px solid #cccccc;
            }
          }
        }
      }
      .title-name {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28px;
        color: #333333;

        .line {
          width: 5px;
          height: 36px;
          background: #0874fa;
          margin-right: 26px;
        }
      }
    }
  }
  .back {
    margin-top: 10px;
    width: 94px;
    height: 43px;
    background: #9dafc1;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    img {
      width: 21px;
      height: 17px;
    }
  }
  .title-wrap {
    height: v-bind("searchWrapStyle");
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      margin-top: 30px;
      padding-left: 35px;
      padding-right: 43px;
      :deep(.el-range-input::placeholder) {
        font-size: 20px;
      }
      :deep(.el-range-input) {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
      }
      :deep(.el-input.el-input--suffix) {
        width: 220px;
      }
      :deep(.el-input__wrapper) {
        width: 220px;
      }
    }
    .add {
      background-color: #009944;
      box-shadow: none;
      color: #fff;
      width: 89px;
      height: 37px;

      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
    }
  }
  .content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .table-btn-wrap {
    display: flex;
    justify-content: space-around;
    button {
      width: 89px;
      height: 37px;
      border-radius: 4px;
    }
    :deep(.el-button.detail) {
      color: #ec8000;
      background-color: #ffefcc;
    }
    .facility {
      font-weight: 400;
      font-size: 19px;
      color: #0874fa !important;
      background-color: #cee3fe;
      /* font-weight: 400 !important;
      font-size: 19px !important;
      color: #ff0000 !important;
      background-color: #ffcccc !important; */
    }
  }
  .content-wrap {
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 35px;
    padding-bottom: 20px;
    .title {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 30px;
    }
    .content {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      padding-left: 0;
      line-height: 35px;
    }
    .content-name {
      margin-top: 25px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
    }
    .status {
      margin-top: 25px;
      font-weight: 500;
      font-size: 20px;
      padding-left: 40px;
      color: #333333;
    }
    .content-val {
      margin-top: 25px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 20px;
      color: #666666;
      padding: 20px 20px 15px 17px;
      background: #f7f7f7;
      border: 1px dashed #b5b5b5;
      line-height: 40px;
    }
    .time,
    .inform,
    .warning,
    .word {
      margin-top: 25px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      display: flex;
      align-items: center;
      .wrap {
        display: flex;
        align-items: center;
        margin-top: 20px;
        cursor: pointer;
      }
      .wrap:first-child {
        margin-top: 0px !important;
      }

      button {
        font-weight: 400;
        font-size: 20px;
        color: #0066ff;
      }
    }
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 142px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      height: 65.8vh;
      overflow-y: scroll;

      button {
        width: 110px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
  :deep(.el-input.el-input--suffix) {
    width: 290px;
  }
  :deep(.el-input.el-input--default.el-input--suffix) {
    width: 140px;
  }
}
</style>
